<template >
  <div class="jia-ding modal-w">
    <div class="head">
      <div class="headitem left">
        <div class="titleinfo">
          <span class="title">常态体征</span>
          <span class="value">64</span>
          <span class="unit">项</span>
        </div>
      </div>
      <div class="headitem right">
        <div class="titleinfo" style="margin-left: 50px">
          <span class="title">体征发现</span>
          <span class="value">1989</span>
          <span class="unit">条</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="left-l">
          <div class="iconcontent">
            <!-- 74 * 84 总宽度84 -->
            <div class="menuicon menuicon1" @click="selectMenu('chengshizhisheng')">
              <img
                  src="@/assets/icon11.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem != 'chengshizhisheng'"
              />
              <img
                  src="@/assets/icon12.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem == 'chengshizhisheng'"
              />
              <img src="@/assets/icon8.png" class="iconx" alt="icon" />
              <img
                  src="@/assets/arrow_left.png"
                  class="arrow-left"
                  alt="icon"
                  v-if="menuitem == 'chengshizhisheng'"
              />
              <img
                  src="@/assets/arrow_right.png"
                  class="arrow-right"
                  alt="icon"
                  v-if="menuitem == 'chengshizhisheng'"
              />
              <div class="menuicontitle">城市之声</div>
            </div>
            <div class="menuicon menuicon2" @click="selectMenu('chengshizhigan')">
              <img
                  src="@/assets/icon11.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem != 'chengshizhigan'"
              />
              <img
                  src="@/assets/icon12.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem == 'chengshizhigan'"
              />
              <img src="@/assets/icon6.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之感</div>
              <img
                  src="@/assets/arrow_left.png"
                  class="arrow-left"
                  alt="icon"
                  v-if="menuitem == 'chengshizhigan'"
              />
              <img
                  src="@/assets/arrow_right.png"
                  class="arrow-right"
                  alt="icon"
                  v-if="menuitem == 'chengshizhigan'"
              />
            </div>
            <div class="menuicon menuicon3" @click="selectMenu('chengshihuxi')">
              <img
                  src="@/assets/icon11.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem != 'chengshihuxi'"
              />
              <img
                  src="@/assets/icon12.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem == 'chengshihuxi'"
              />
              <img src="@/assets/icon2.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市呼吸</div>
              <img
                  src="@/assets/arrow_left.png"
                  class="arrow-left"
                  alt="icon"
                  v-if="menuitem == 'chengshihuxi'"
              />
              <img
                  src="@/assets/arrow_right.png"
                  class="arrow-right"
                  alt="icon"
                  v-if="menuitem == 'chengshihuxi'"
              />
            </div>
            <div class="menuicon menuicon4" @click="selectMenu('chengshimaibo')">
              <img
                  src="@/assets/icon11.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem != 'chengshimaibo'"
              />
              <img
                  src="@/assets/icon12.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem == 'chengshimaibo'"
              />
              <img src="@/assets/icon4.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市脉搏</div>
              <img
                  src="@/assets/arrow_left.png"
                  class="arrow-left"
                  alt="icon"
                  v-if="menuitem == 'chengshimaibo'"
              />
              <img
                  src="@/assets/arrow_right.png"
                  class="arrow-right"
                  alt="icon"
                  v-if="menuitem == 'chengshimaibo'"
              />
            </div>
            <div class="menuicon menuicon5" @click="selectMenu('chengshizhiyan')">
              <img
                  src="@/assets/icon11.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem != 'chengshizhiyan'"
              />
              <img
                  src="@/assets/icon12.png"
                  class="base"
                  alt="icon"
                  v-if="menuitem == 'chengshizhiyan'"
              />
              <img src="@/assets/icon10.png" class="iconx" alt="icon" />
              <div class="menuicontitle">城市之眼</div>
              <img
                  src="@/assets/arrow_left.png"
                  class="arrow-left"
                  alt="icon"
                  v-if="menuitem == 'chengshizhiyan'"
              />
              <img
                  src="@/assets/arrow_right.png"
                  class="arrow-right"
                  alt="icon"
                  v-if="menuitem == 'chengshizhiyan'"
              />
            </div>
          </div>
        </div>
        <div class="left-r">
          <slot name="changtai" :menuitem="menuitem"></slot>
        </div>
      </div>
      <div class="right">
        <div class="right-t">
          <pie :dataitems="dataitems" />
        </div>
        <forms class="right-b" :fromsData="fromsData"></forms>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import pie from '@/components/pie.vue'
import forms from "./forms.vue";
import { ref, reactive } from 'vue';
export default {

  components: {
    pie,
    forms
  },
  setup(props) {
    let dataitems = reactive([
      {
        name: '智联',
        value: 189,
        unit: '条'
      },
      {
        name: '主动',
        value: 1711,
        unit: '条'
      },
      {
        name: '被动',
        value: 89,
        unit: '条'
      },
    ])
    const fromsData: any = [{
      "time": "2021/5/16 20:28",
      "text": "街面秩序",
      "address": "博乐路 190号 蓝益服饰 ",
      "state": "处置",
      "type": "主动"
    },
      {
        "time": "2021/5/16 20:26",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3421弄17号 育兰二村 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:26",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3421弄17号 育兰二村 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:25",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3421弄17号 育兰二村",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:24",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3421弄17号 育兰二村",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:23",
        "text": "街面秩序",
        "address": "清河路 36－3",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:22",
        "text": "公共安全重点点位排查",
        "address": "陈宝路 1638号 上海天然气管网有限公司刘行门站 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:12",
        "text": "街面秩序",
        "address": "清河路 21号",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:08",
        "text": "公共安全重点点位排查",
        "address": "云谷路1660号交大附中 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:06",
        "text": "公共安全重点点位排查",
        "address": "洪德路1501号      ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:06",
        "text": "公共安全重点点位排查",
        "address": "胜辛路1616号加油站  ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:05",
        "text": "公共安全重点点位排查",
        "address": "崇信路1585号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:04",
        "text": "公共安全重点点位排查",
        "address": "崇信路1531号 ",
        "state": " 处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:03",
        "text": "公共安全重点点位排查",
        "address": "云屏路 1515弄3号",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 20:00",
        "text": "公共安全重点点位排查",
        "address": "白银路 1490号易佰酒店",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:59",
        "text": "公共安全重点点位排查",
        "address": "洪德路880号美亚璟庭酒店",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:58",
        "text": "公共安全重点点位排查",
        "address": "崇信路 1501号-03汉庭酒店 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:58",
        "text": "公共安全重点点位排查",
        "address": "洪德路933号实验幼儿园 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:57",
        "text": "公共安全重点点位排查",
        "address": "宝塔路 1166号华二中学 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:56",
        "text": "公共安全重点点位排查",
        "address": "浏翔公路 2878号 马陆镇大宏村村委会 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:56",
        "text": "公共安全重点点位排查",
        "address": "合作路 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:55",
        "text": "公共安全重点点位排查",
        "address": "高台路1216号妇幼保健院 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:52",
        "text": "公共安全重点点位排查",
        "address": "白银路796号海友酒店 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:13",
        "text": "公共安全重点点位排查",
        "address": "横仓公路1655号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:07",
        "text": "公共安全重点点位排查",
        "address": "横仓公路 130号大宏村社区服务中心 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:05",
        "text": "公共安全重点点位排查",
        "address": "丰登路 399号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 19:01",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": " 处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:57",
        "text": "公共安全重点点位排查",
        "address": "陈宝路 269号 陈村村村委会 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:55",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:53",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:48",
        "text": "公共安全重点点位排查",
        "address": "澄浏中路 618号",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:47",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:44",
        "text": "公共安全重点点位排查",
        "address": "澄浏中路 618号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:43",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:40",
        "text": "公共安全重点点位排查",
        "address": "丰登路 1210号 联华超市 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:37",
        "text": "公共安全重点点位排查",
        "address": "博学路128号",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:35",
        "text": "街面秩序",
        "address": "温宿路 2-4号 嘉定集体商业九百超市李园店 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:34",
        "text": "街面秩序",
        "address": "清河路21－3 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:34",
        "text": "街面秩序",
        "address": "温宿路 2-4号 嘉定集体商业九百超市李园 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:27",
        "text": "街面秩序",
        "address": "清河路 43号-3",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:11",
        "text": "公共设施",
        "address": "徐行镇启宁路与顺宁路交叉口东南角 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:06",
        "text": "市容环卫",
        "address": "阿克苏路双丁路西北角 ",
        "state": "发现",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:06",
        "text": "市容环卫",
        "address": "北大街95号 ",
        "state": " 处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:03",
        "text": "市容环卫",
        "address": "北大街79号 ",
        "state": " 处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:02",
        "text": "街面秩序",
        "address": "清河路 67号 新陆牛仔 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 18:02",
        "text": "街面秩序",
        "address": "北大街79号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:59",
        "text": "公共安全重点点位排查",
        "address": "塔新路 855号 中国石化 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:58",
        "text": "街面秩序",
        "address": "清河路49－1 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:58",
        "text": "公共安全重点点位排查",
        "address": "金运路上 近鹤霞路 中国中铁项目部 内 ",
        "state": "发现",
        "type": "被动"
      },
      {
        "time": "2021/5/16 17:54",
        "text": "公共设施",
        "address": "嘉定区德富路上近天祝路 ",
        "state": "发现",
        "type": "被动"
      },
      {
        "time": "2021/5/16 17:54",
        "text": "街面秩序",
        "address": "清河路 31弄3号 金伯利钻石 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:52",
        "text": "街面秩序",
        "address": "金沙路 525号 可的便利店 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:50",
        "text": "市容环卫",
        "address": "平城路 2039号门前 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:49",
        "text": "街面秩序",
        "address": "温宿路 2弄2号 鸡公煲 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:48",
        "text": "街面秩序",
        "address": "清河路 31弄2号 金伯利钻石 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:46",
        "text": "街面秩序",
        "address": "李园二村南门 ",
        "state": "处置",
        "type":"主动"
      },
      {
        "time": "2021/5/16 17:44",
        "text": "公共安全重点点位排查",
        "address": "嘉戬公路 665号 上海戬浜学校 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:43",
        "text": "街面秩序",
        "address": "清河路 21号",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:42",
        "text": "公共安全重点点位排查",
        "address": "嘉戬公路 688号 上海市嘉定区国家税务局稽查局第二检查所 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:39",
        "text": "公共安全重点点位排查",
        "address": "大治路 516号 ",
        "state": "  处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:37",
        "text": "公共安全重点点位排查",
        "address": "大治路 588号 马陆资产经营有限公司 ",
        "state": "  处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:35",
        "text": "街面秩序",
        "address": "温宿路 9号 门牌 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:34",
        "text": "公共安全重点点位排查",
        "address": "云屏路1515弄3号 ",
        "state": "  处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:33",
        "text": "公共安全重点点位排查",
        "address": "崇信路1531号",
        "state": "  处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:33",
        "text": "市容环卫",
        "address": "塔城路 453弄2号 中国光大银行嘉定支行 ",
        "state": "发现",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:32",
        "text": "市容环卫",
        "address": "60号 李园一村 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:32",
        "text": "街面秩序",
        "address": "丰庄路 612号 天目山农庄 ",
        "state": "  结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:32",
        "text": "街面秩序",
        "address": "清河路 2-6号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:32",
        "text": "公共安全重点点位排查",
        "address": "崇信路1585号 ",
        "state": "  处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:30",
        "text": "公共安全重点点位排查",
        "address": "洪德路1501号 ",
        "state": "   处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:29",
        "text": "市容环卫",
        "address": "和桥路 475号 上海伯龙木业有限公司 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:25",
        "text": "街面秩序",
        "address": "丰庄路 608号 ",
        "state": "   结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:21",
        "text": "街面秩序",
        "address": "丰庄路 604号",
        "state": " 结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:20",
        "text": "市容环卫",
        "address": "313号 徐行镇和桥村 ",
        "state": "  结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:15",
        "text": "街面秩序",
        "address": "博乐路 190号 蓝益服饰 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:15",
        "text": "街面秩序",
        "address": "北大街57号 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:12",
        "text": "公共安全重点点位排查",
        "address": "横仓公路1655号 ",
        "state": " 处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:11",
        "text": "公共安全重点点位排查",
        "address": "宝塔路1166华二中学 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:09",
        "text": "公共安全重点点位排查",
        "address": "崇信路 1501号汉庭酒店 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:08",
        "text": "市容环卫",
        "address": "343号 徐行镇和桥村 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:07",
        "text": "街面秩序",
        "address": "清河路，北大街口 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:06",
        "text": "公共安全重点点位排查",
        "address": "合作路",
        "state": "  结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:06",
        "text": "市容环卫",
        "address": "343号 徐行镇和桥村 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:05",
        "text": "街面秩序",
        "address": "清河路 36号 老凤祥银楼 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:05",
        "text": "市容环卫",
        "address": "嘉新公路1600号大门口东侧十米 ",
        "state": "处置",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:05",
        "text": "公共安全重点点位排查",
        "address": "戬浜镇澄桥村 连祁餐厅地面停车场内 ",
        "state": "发现",
        "type": "被动"
      },
      {
        "time": "2021/5/16 17:04",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:03",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:03",
        "text": "公共安全重点点位排查",
        "address": "丰登路399号",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:03",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:02",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:02",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:01",
        "text": "市容环卫",
        "address": "梅园路 285号-2",
        "state": "发现",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:01",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:01",
        "text": "公共安全重点点位排查",
        "address": "白银路 1490号易佰酒店 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:01",
        "text": "市容环卫",
        "address": "342号 徐行镇和桥村 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:00",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:00",
        "text": "公共安全重点点位排查",
        "address": "洪德路880美亚璟庭酒店 ",
        "state": "结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 17:00",
        "text": "公共安全重点点位排查",
        "address": "宝安公路 3136弄36号 清水湾 ",
        "state": "   结案",
        "type": "主动"
      },
      {
        "time": "2021/5/16 9:36",
        "text": "不明归属井盖",
        "address": "嘉定区曹安公路乐秀路 ",
        "state": "未结案",
        "type": "被动"
      }
    ]

    // menu 管理
    let menuitem = ref('chengshizhisheng');

    // 切换图标事件
    let selectMenu = (itemname) => {
      menuitem.value = itemname;

      // provide('itemname', itemname)
    }

    return {
      dataitems,
      fromsData: reactive(fromsData),
      selectMenu,
      menuitem
    }

  }
}
</script>
<style lang="less" scoped>
.modal-w {
  border-radius: 10px;
  width: 1000px;
  height: 600px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding-left: 20px;
  //padding-right: 20px;
  background-color: #011115;

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
}

.jia-ding> .head {
  height: 80px;
  border-bottom: 2px dashed rgba(7,48,74,0.47);

  .headitem {
    width: 50%;
    height: 100%;
    float: left;
    padding-left: 20px;
    /*border: 1px dashed green;*/
    position: relative;

    .titleinfo {
      height: 40px;
      /*line-height: 40px;*/
      // border: 1px solid red;
      display: flex;
      align-items: flex-end;

      .title {
        color: #fff;
        font-size: 28px;
      }

      .value {
        font-size: 20px;
        color: #13f2f1;
        margin-left: 22px;
        line-height: 26px;
      }

      .unit {
        font-size: 20px;
        color: #ccc;
        line-height: 26px;
        margin-left: 10px;
      }
    }
  }
}

 .jia-ding>.content {
  height: 520px;
  padding-top: 20px;
  padding-bottom: 20px;
  // border: 1px dashed green;

  .left {
    height: 100%;
    width: 59%;
    float: left;
    /*border-rignt: 1px dashed green;*/
    display: flex;

    .left-l {
      width: 80px;
      /*border: 1px dashed red;*/
      height: 100%;

      .iconcontent {
        width: 100%;
        height: 100%;
        // border: 1px solid red;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        .menuicon {
          height: 84px;
          width: 74px;
          // border: 1px dashed green;
          text-align: center;
          position: relative;
          padding-top: 10px;

          .base {
            width: 50px;
            height: 50px;
            position: absolute;

            left: 50%;
            transform: translate(-50%, 0);
          }

          .iconx {
            // width: 50px;
            // height: 50px;
            position: absolute;
            top: 34px;
            left: 50%;
            transform: translate(-50%, -12px);
          }

          .menuicontitle {
            font-size: 14px;
            font-weight: 600;
            /*#02f6ff*/
            color: #B5BFCC;
            position: absolute;
            bottom: 0;
            left: 10px;
          }
        }
      }
      .menuicon1 {
      }
    }
    .left-r {
      flex: 1;
      /*border: 1px dashed red;*/
      // padding-left: 20px;
      // padding-right: 20px;
    }
  }
  .right {
    height: 100%;
    width: 41%;
    /*float: left;*/
    /*border: 1px dashed green;*/
    border-left: 2px dashed rgba(7,48,74,0.47);
    display: flex;
    flex-direction: column;

    .right-t {
      height: 168px;
      /*border: 1px dashed red;*/
    }

    .right-b {
      flex: 1;
      /*border: 1px dashed red;*/
      overflow: hidden;
    }
  }
}
</style>

